import { PlusOutlined } from "@ant-design/icons";
import { ProTable } from "@ant-design/pro-components";
import { Button, Tag } from "antd";

import React from "react";

const UserTable: React.FC = () => {
  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status: string) => (
        <Tag color={status === "active" ? "green" : "red"}>
          {status === "active" ? "活跃" : "禁用"}
        </Tag>
      ),
    },
    {
      title: "注册时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "操作",
      key: "action",
      render: () => <Button type="link">编辑</Button>,
    },
  ];

  const dataSource = [
    {
      key: "1",
      name: "张三",
      email: "zhangsan@example.com",
      status: "active",
      createdAt: "2024-01-01",
    },
    {
      key: "2",
      name: "李四",
      email: "lisi@example.com",
      status: "inactive",
      createdAt: "2024-01-02",
    },
  ];

  return (
    <div style={{ padding: 24 }}>
      <h1>用户管理</h1>
      <ProTable
        columns={columns}
        dataSource={dataSource}
        rowKey="key"
        search={false}
        toolBarRender={() => [
          <Button key="add" type="primary" icon={<PlusOutlined />}>
            新增用户
          </Button>,
        ]}
      />
    </div>
  );
};

export default UserTable;
